import React, { memo, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";

import { Slider } from "antd";

import { formatMinuteSecond } from "@/utils/data-format";

import { PlayerContainer, PlayerControlBox, PlayerProgressBox, PlayerWrapper } from "./style";
import { getSongDetailAction } from "./store/actionCreators";

export default memo(function Player() {
  const { curSong = {} } = useSelector(state => {
    return state.getIn(["player", "curSong"]);
  }, shallowEqual);

  const songName = curSong.name;
  const artist = curSong.ar && curSong.ar[0].name;
  const duration = curSong.dt;

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getSongDetailAction(411214279));
  }, [dispatch]);

  return (
    <PlayerWrapper className="sprite_player">
      <PlayerContainer className="wrap-v2">
        <PlayerControlBox>
          <button className="sprite_player prev"></button>
          <button className="sprite_player play"></button>
          <button className="sprite_player next"></button>
        </PlayerControlBox>
        <PlayerProgressBox>
          <img className="songImg" src="todo" alt="" />
          <div className="info">
            <div className="song">
              <span className="songName">{songName}</span>
              <a href="todo" className="artist">
                {artist}
              </a>
            </div>
            <div className="progress">
              <Slider />
            </div>
          </div>
          <div class="time">
            <span className="now-time">02:18</span>
            <span className="divider">/</span>
            <span className="duration">{formatMinuteSecond(duration)}</span>
          </div>
        </PlayerProgressBox>
      </PlayerContainer>
    </PlayerWrapper>
  );
});
